<template>
  <!-- <el-dialog
    title="提示"
    :visible="isShow"
    width="30%"
    :before-close="handleClose"
  >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancalClose">取 消</el-button>
      <el-button type="primary" @click="isShow = false">确 定</el-button>
    </span>
  </el-dialog> -->
  <!-- <a-model
    :title="renderKey.title"
    :visible="isShow"
    :confirm-loading="confirmLoading"
    :mask-closable="false"
    cancel-text="取消"
    ok-text="1确认"
    :width="renderKey.width || '1300px'"
    @ok="handleOk"
    @cancel="handleCancel"
  > -->
  <el-dialog
    :visible="isShow"
    :confirm-loading="confirmLoading"
    :mask-closable="false"
    :width="renderKey.width || '1300px'"
    append-to-body
    :before-close="handleCancel"
    :fullscreen="isFullscreen"
    :close-on-click-modal="false"
  >
    <div ref="modalContainerRef" class="modal-container">
      <!-- 表头配置 -->
      <MyTable
        v-if="renderKey.buttonCode === 6"
        :tabledata="renderKey"
        @checklist="checklist"
        @changeData="changeData"
        @findisBindchecked="findisBindchecked"
      />
      <template v-else-if="chooseComponents === 0">
        <component
          :is="apps"
          v-if="component!=&quot;&quot;"
          ref="commonComponents"
          disabled-height
          :modal-container-height="modalContainerHeight"
          :is-process="isProcess"
          :specila-menu-id="specilaMenuId"
        />
      </template>

      <template v-else-if="chooseComponents === 1">
        <My-Form
          v-if="isShowCommonForm"
          ref="form"
          :table-id="tableId"
          :is-show="isShow"
          :flag="flag"
          :out-data="{ $data, $props }"
          style="height: 100%;"
        />
      </template>
    </div>
    <div slot="title" class="header-title">
      <span class="name">{{ renderKey.title }}</span>
      <svg-icon
        class="header-title-screen"
        style="width: 1.4rem;height: 1.4rem;position: relative;top: 2px;"
        :icon-class="isFullscreen?'fullscreen-exit-dialog':'fullscreen-dialog'"
        @click="isFullscreen=!isFullscreen"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleOk">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import MyForm from './MyForm';
import MyTable from './MyTable.vue';
import { bindOrNot } from '@/api/commonPropertypage/index';
// import {getReportHeaderByTableId} from "@/api/dynamicInterface/index"
import dialogForm from './dialogForm';
export default {
  components: {
    MyForm,
    MyTable
  },
  mixins: [dialogForm],
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    userid: {
      type: String,
      default: ''
    },
    renderKey: {
      type: Object,
      default: () => ({})
    },
    clickBtnItemNow: {
      type: Object,
      default: () => ({})
    },
    component: {
      type: String,
      default: ''
    },
    isProcess: {
      type: Number,
      default: 1
    },
    specilaMenuId: {
      type: String,
      default: ''
    },
    // 双击行信息
    dbTableRowInfo: {
      type: Object,
      default: () => ({})
    },
    menuType: {
      type: Number,
      default: 0
    }
  },
  // this.apps = require(`@/views/${this.component}`).default;
  data() {
    return {
      confirmLoading: false,
      formData: {
        添加: {}
      },
      checklists: [],
      apps: '',
      isFullscreen: false,
      modalContainerHeight: 0
    };
  },
  watch: {
    component: {
      immediate: true, // 这句重要
      handler(val) {
        val && (this.apps = require(`@/views${val}`).default);
      }
    },
    isProcess: {
      immediate: true, // 这句重要
      handler(val) {
        this.isProcess = val;
      }
    },
    isShow: {
      handler(val) {
        val && this.$nextTick(() => {
          this.getModalContainerHeight();
        });
      }
    },
    isFullscreen() {
      this.getModalContainerHeight();
    }
  },
  methods: {
    changeData() {
      this.$emit('changeData');
    },
    findisBindchecked(v) {
      this.$emit('findisBindchecked', v);
    },
    // 计算里面的高度
    getModalContainerHeight() {
      this.modalContainerHeight = this.$refs.modalContainerRef.offsetHeight;
    },
    //
    // handleClose(done) {
    //   done();
    // },
    handleCancel() {
      // 查看详情直接关
      if (this.isLook) {
        this.close();
      } else {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.close();
          })
          .catch(_ => {});
      }
    },
    close() {
      // 关闭,把flag重置回去
      this.$route.query.flag = '0';
      this.$emit('close');
    },
    handleOk(e) {
      // 查看详情直接关
      if (this.isLook) {
        this.close();
        return;
      }
      if (this.isShowCommonForm) {
        // 我表单逻辑写mixins
        // console.log(this.$refs.commonComponents.commonDo('start'));
        // if (this.renderKey.title.includes('添加')) {
        //   this.$refs.commonComponents.commonDo('startEnd');
        // } else {
        //   this.submit();
        // }
        this.submit();
        return;
      }
      bindOrNot({
        tableId: this.tableId,
        userId: this.userid,
        list: this.checklists
      }).then(res => {
        if (res.success) {
          this.$parent.getHeaderByTableId(this.renderKey.form.styleHead);
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          });
        }
      });
      // this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.close();
        this.confirmLoading = false;
      }, 1000);
    },
    checklist(val) {
      this.checklists = val;
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-dialog__wrapper {
  z-index: 99999;
}
// /deep/.el-dialog__footer{
  // position:absolute;
  // bottom: 0;
  // width: 100%;
// }
/deep/.el-dialog__body{
  height: calc(100% - 100px);
}
/deep/.el-dialog{
  // min-height: 550px;
  height: 84vh;
  margin-top: 8vh!important;
  .el-dialog__footer{
    background: #ffffff;
    // bottom: -60px;
  }
}
/deep/.is-fullscreen{
   height: 100%!important;
  margin-top: 0vh!important;
}
.modal-container {
  // max-height: 400px;
  height: 100%;
  overflow-y: auto;
}
.header-title{
  display: flex;
  justify-content: space-between;
  .header-title-screen{
    margin-right: 50px;
    cursor: pointer;
  }
}
</style>
